<style lang=less>
	@import '../assets/public.less';
	@import './register.less';
	@import './mian.less';
</style>
<template>
	<div id="main">
		<HeaDer></HeaDer>
		<div class="register_main">
			<div class="register_box">
				<div class="header_reg">
					<h2 class="welcome_reg" id="welcome_reg">{{$t("register.header[0]")}}</h2><!-- 欢迎注册 -->
					<span class="mobile_reg" id="mobile_reg">{{$t("register.header[1]")}}</span><!-- 手机注册 -->
				</div>
				<div class="content_warp">
					<div class="form_warp">
						<el-form :label-position="labelPosition" :model="userData" status-icon :rules="rules2" ref="userData" label-width="100px" class="demo-ruleForm">
							<el-form-item :label='$t("register.list[0]")' prop="mobile"><!-- 手机号码 -->
								<el-input v-model.number="userData.mobile" auto-complete="off"></el-input>
							</el-form-item>
							<!--验证码-->
							<div class="imgCode">
								<div class="inp_warp">
									<el-form-item :label='$t("register.list[1]")' prop=""><!-- 图片验证码 -->
										<el-input type="text" auto-complete="off" v-model="verify"></el-input>
									</el-form-item>
								</div>
								<div class="img_warp" id="img_warp">
									<div id="v_container" style="width: 210px;height: 45px;"></div>
								</div>
							</div>
							<!--验证码 end-->

							<div class="code_warp">
								<el-form-item :label='$t("register.list[2]")' prop="code"><!-- 短信验证码 -->
									<el-input v-model.number="userData.code" auto-complete="off"></el-input>
								</el-form-item>
								<div class="btn_code" @click="getCode()">
									<el-input type="button" :value='btnCode.time' :disabled='btnCode.disabled'></el-input>
								</div>
							</div>
							<el-form-item :label='$t("register.list[3]")' prop="opwd"><!-- 登录密码 -->
								<el-input type="password" v-model="userData.opwd" auto-complete="off"></el-input>
							</el-form-item>
							<el-form-item :label='$t("register.list[4]")' prop="opwd1"><!-- 确认密码 -->
								<el-input type="password" v-model="userData.opwd1" auto-complete="off"></el-input>
							</el-form-item>
							<el-form-item :label='$t("register.list[5]")' prop="tjuser"><!-- 邀请码(必填) -->
								<el-input v-model="userData.tjuser"></el-input>
							</el-form-item>

							<div class="agreement_warp">
								<el-checkbox v-model="checked">{{$t("register.list1[0]")}}</el-checkbox><!-- 我已阅读并同意 -->
								<span class="agreement" @click="look_agress">{{$t("register.list1[1]")}}</span><!-- 《用户协议》 -->
							</div>
							<el-form-item>
								<el-button type="primary" @click="submitForm('userData')" :loading="loading">{{$t("register.list1[2]")}}</el-button><!-- 注册 -->
								<div class="have">
									<span>{{$t("register.list1[3]")}}</span><!-- 已有账号？ -->
									<span class="go_login" @click="go_login()">{{$t("register.list1[4]")}}</span><!-- 去登录 -->
								</div>
							</el-form-item>
						</el-form>
					</div>
					<div class="prompt">
						<div class="warp_prompt">
							<p>{{$t("register.list2[0]")}}</p><!-- 请妥善保管您的账号及登录密码 -->
							<p>{{$t("register.list2[1]")}}</p><!-- 请勿和其他网站使用同样的登录密码 -->
						</div>
						<div class="rules_pwd">
							<p>{{$t("register.list2[2]")}}</p><!-- 8-20个字符，不可以是纯数字或纯字母 -->
						</div>
					</div>
				</div>
			</div>

			<!--弹框-->
			<div tabindex="-1" role="dialog" aria-modal="true" aria-label="用户协议" class="el-message-box__wrapper" style="z-index: 2017;" v-show="messageMoble">
				<div class="el-message-box">
					<div class="yhbox">
						<div class="el-message-box__header">
							<div class="el-message-box__title">
								<span>{{$t("register.list3[0]")}}</span><!-- 用户协议 -->
							</div>
							<button type="button" aria-label="Close" class="el-message-box__headerbtn" @click="messageMoble = false">
								<i class="el-message-box__close el-icon-close"></i>
							</button>
						</div>
						<div class="el-message-box__content">
							<div class="el-message-box__message">
								<pre></pre>
							</div>
							<div class="el-message-box__input" style="display: none;">
								<div class="el-input">
									<input type="text" autocomplete="off" placeholder="" class="el-input__inner">

								</div>
								<div class="el-message-box__errormsg" style="visibility: hidden;"></div>
							</div>
						</div>
						<div class="el-message-box__btns">
							<button type="button" class="el-button el-button--default el-button--small el-button--primary " @click="messageMoble = false">
								<span>{{$t("register.list3[1]")}}</span><!-- 欢迎注册 -->
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="v-modal" tabindex="0" style="z-index: 2016;" v-show="messageMoble"></div>
		</div>
		<FooTer></FooTer>
	</div>
</template>
<script>
	import Header1 from "./main/header.vue";
	import Footer1 from "./main/footer.vue";
	import Verify from 'vue2-verify'
	export default {
		data() {
			var _this = this;
			var mobile = (rule, value, callback) => {
				if(!_this.$public.checkMobile(value)) {
					return callback(new Error(this.$t("Verification.phone[0]")));//请输入有效的手机号
				} else {
					callback();
				}
			};
			var code = (rule, value, callback) => {
				if(!_this.$public.code(value)) {
					return callback(new Error(this.$t("Verification.Code[1]")));//验证码格式有误
				} else {
					callback();
				}
			};
			var tjuser = (rule, value, callback) => {
				if(!value) {
					return callback(new Error(this.$t("Verification.type[2]")));//推荐码不能为空
				} else {
					callback();
				}
			};
			var validateopwd = (rule, value, callback) => {
				if(!_this.$public.pwd(value)) {
					callback(new Error(this.$t("Verification.Password[0]")));//请输入有效的密码
				} else {
					callback();
				}
			};
			var validateopwd2 = (rule, value, callback) => {
				if(value === '') {
					callback(new Error(this.$t("Verification.Password[1]")));//请再次输入密码
				} else if(value !== this.userData.opwd) {
					callback(new Error(this.$t("Verification.Password[2]")));//两次输入密码不一致!
				} else {
					callback();
				}
			};
			return {
				messageMoble: false,
				verifyCode:'', //图片验证码
				verify:'',
				argeeData: '', //用户协议
				userData: {
					opwd: '', //密码1
					opwd1: '', //密码2
					mobile: '', //手机号
					code: '', //验证码
					tjuser: '', //推荐码（必填）
				},
				phone: '', //手机号二次验证
				rules2: {
					opwd: [{
						validator: validateopwd,
						trigger: 'blur'
					}],
					opwd1: [{
						validator: validateopwd2,
						trigger: 'blur'
					}],
					mobile: [{
						validator: mobile,
						trigger: 'blur'
					}],
					code: [{
						validator: code,
						trigger: 'blur'
					}],
					tjuser: [{
						validator: tjuser,
						trigger: 'blur'
					}]
				},
				labelPosition: 'top', //插件自带
				checked: false, //有没有选用户协议
				btnCode: {
					time: this.$t("changetpwd.list[4]"), //倒计时
					disabled: false
				},
				loading: false, //防止表单重复提交标志				
			};
		},
		methods: {
			//注册执行函数
			submitForm(formName) {
				var _this = this;
				_this.$refs[formName].validate((valid) => {
					if(valid) {
						if(_this.checked == false) {
							_this.$public.msg(_this.$t("Verification.type[1]"), 'warning', _this);//请同意用户协议
						} else if(_this.userData.mobile != _this.phone) {
							_this.$public.msg(_this.$t("Verification.phone[1]"), 'warning', _this);//获取验证码手机号与注册手机号不一致
						} else {
							_this.loading = true;
							_this.$http.post(_this.$http.register, _this.userData).then(function(response) {
								_this.loading = false;
								if(response.data.status == "200") {
									_this.$public.msg(response.data.msg, 'success', _this);
									_this.$public.go('login', 10, _this);
									_this.loading = false;
								} else {
									_this.$public.msg(response.data.msg, 'warning', _this);
								}
							}).catch(function(error) {});

						}
					} else {
						return false
					}
				});
			},
			//点击获取验证码
			getCode() {
				var _this = this;
				if(!this.verifyCode.validate(this.verify)){
					_this.$public.msg(_this.$t("login.submitForm[1]"), 'warning', _this);//图片验证码有误
					return false;
				}else if(!_this.$public.checkMobile(_this.userData.mobile)) {
					_this.$public.msg(_this.$t("Verification.phone[0]"), 'warning', _this);//请输入有效的手机号
					return false;
				}
				_this.btnCode.disabled = true;
				//获取验证码
				_this.$http.post(_this.$http.send_sms, {
					mobile: _this.userData.mobile,
					type: 1

				}).then(function(response) {
					if(response.data.status == "200") {
						_this.$public.setTime(_this); //倒计时函数封装
						_this.phone = _this.userData.mobile //手机号保存
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
						_this.btnCode.disabled = false;
					}
				}).catch(function(error) {});
				//请求接口 成功后执行此函数
			},
			//查看用户协议
			look_agress() {
				var _this = this;
				_this.$http.get(_this.$http.agree, {
					params: {
						type: 'reg_agree'
					}
				}).then(function(response) {
					if(response.data.status == "200") {
						// console.log(response.data.data);
						$('.el-message-box__message pre').html(response.data.data);
						_this.messageMoble = true;
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
			},
			//点击去登录执行函数
			go_login() {
				var _this = this;
				_this.$router.push({
					path: '/login'
				});
			},
		},
		mounted: function() {
			this.userData.tjuser = this.$route.query.tjuser;
			if(this.$cookies.get('changeBg') == 'night' || !this.$cookies.get('changeBg')) {
				$('#main').removeClass('mainb');
				$('#main').addClass('mainy');
			} else {
				$('#main').removeClass('mainy');
				$('#main').addClass('mainb');
			}
			
			this.$public.codeImg('v_container');
			this.verifyCode = new GVerify("v_container");
			
		},
		created: function() {
			//邀请码

		},
		components: {
			"HeaDer": Header1,
			"FooTer": Footer1,
		}
	}
</script>
<style scoped>
	.el-message-box {
		width: 800px !important;
	}
	
	.imgCode {
		overflow: hidden;
	}
	
	.inp_warp {
		float: left;
		width: 55%;
		margin-right: 2%;
	}
	
	.img_warp {
		float: left;
		width: 40%;
		margin-top: 22px;
	}
</style>